import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { $ } from 'protractor';

@Component({
  selector: 'app-c01',
  templateUrl: './c01.page.html',
  styleUrls: ['./c01.page.scss'],
})
export class C01Page implements OnInit {

  card: HTMLIonCardElement;
  constructor(public navCtrl: NavController) { }

/**
 * 控制checkbox1的checked属性
 */
  check1: boolean = false;

  /**
 * 控制checkbox2的checked属性
 */
  check2: boolean = false;

  /**
   * radio按钮组选择的结果
   */

  r: string;

  content: HTMLDivElement;
  ionViewDidLoad(){

  }
  showResult() {
    this.card.style.display = "block";
    //由于是双向绑定，所以代码中不需要考虑如何于html页面交互，直接使用check1，check2的值就行了
    this.content.innerHTML = `复选结果:</br>`;
    this.content.innerHTML += "喜欢篮球：" + this.check1  +`</br>`+"喜欢排球：" + this.check2 + `</br>`;
    this.content.innerHTML += `单选结果:</br>`;
    if (this.r == undefined) {
      this.content.innerHTML += "暂未选择";
    } else {
      this.content.innerHTML += this.r;
    }
  }
  ngOnInit() {
    this.card = document.getElementById("card") as HTMLIonCardElement;
    this.content = document.getElementById("content") as HTMLDivElement
  }

}
